<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分销员详情</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div class="min-h-screen">
        <header class="bg-white shadow">
            <div class="max-w-7xl mx-auto py-6 px-4">
                <div class="flex items-center">
                    <a href="./distributor_list.html" class="text-gray-500 hover:text-gray-700 mr-4">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                        </svg>
                    </a>
                    <h1 class="text-2xl font-bold text-gray-900">分销员详情</h1>
                </div>
            </div>
        </header>

        <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
            <!-- 基本信息 -->
            <div class="bg-white shadow rounded-lg overflow-hidden mb-6">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-medium text-gray-900">基本信息</h2>
                </div>
                <div class="px-6 py-4">
                    <div class="flex items-center mb-6">
                        <div class="h-20 w-20 rounded-full bg-gray-200"></div>
                        <div class="ml-6">
                            <div class="text-xl font-medium text-gray-900">张三</div>
                            <div class="text-sm text-gray-500 mt-1">138****8000</div>
                            <div class="mt-2">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">黄金分销商</span>
                                <span class="ml-2 px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">正常</span>
                            </div>
                        </div>
                        <div class="ml-auto">
                            <button class="px-4 py-2 border border-red-500 text-red-500 rounded-md hover:bg-red-50">冻结账号</button>
                        </div>
                    </div>
                    <dl class="grid grid-cols-4 gap-4">
                        <div class="col-span-1">
                            <dt class="text-sm font-medium text-gray-500">注册时间</dt>
                            <dd class="mt-1 text-sm text-gray-900">2023-12-01</dd>
                        </div>
                        <div class="col-span-1">
                            <dt class="text-sm font-medium text-gray-500">邀请人</dt>
                            <dd class="mt-1 text-sm text-gray-900">李四（139****9000）</dd>
                        </div>
                        <div class="col-span-1">
                            <dt class="text-sm font-medium text-gray-500">累计订单</dt>
                            <dd class="mt-1 text-sm text-gray-900">89笔</dd>
                        </div>
                        <div class="col-span-1">
                            <dt class="text-sm font-medium text-gray-500">本月订单</dt>
                            <dd class="mt-1 text-sm text-gray-900">12笔</dd>
                        </div>
                    </dl>
                </div>
            </div>

            <!-- 佣金信息 -->
            <div class="bg-white shadow rounded-lg overflow-hidden mb-6">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-medium text-gray-900">佣金信息</h2>
                </div>
                <div class="px-6 py-4">
                    <div class="grid grid-cols-4 gap-6">
                        <div class="bg-gray-50 rounded-lg p-4">
                            <div class="text-sm text-gray-500">累计佣金</div>
                            <div class="text-2xl font-bold mt-2">¥15,000.00</div>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-4">
                            <div class="text-sm text-gray-500">可提现金额</div>
                            <div class="text-2xl font-bold mt-2">¥3,000.00</div>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-4">
                            <div class="text-sm text-gray-500">已提现金额</div>
                            <div class="text-2xl font-bold mt-2">¥11,000.00</div>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-4">
                            <div class="text-sm text-gray-500">冻结金额</div>
                            <div class="text-2xl font-bold mt-2">¥1,000.00</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 团队信息 -->
            <div class="bg-white shadow rounded-lg overflow-hidden mb-6">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-medium text-gray-900">团队信息</h2>
                </div>
                <div class="px-6 py-4">
                    <div class="grid grid-cols-3 gap-6">
                        <div class="bg-gray-50 rounded-lg p-4">
                            <div class="text-sm text-gray-500">直属下级</div>
                            <div class="text-2xl font-bold mt-2">12人</div>
                            <div class="text-sm text-gray-500 mt-2">本月新增：2人</div>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-4">
                            <div class="text-sm text-gray-500">团队规模</div>
                            <div class="text-2xl font-bold mt-2">45人</div>
                            <div class="text-sm text-gray-500 mt-2">本月新增：5人</div>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-4">
                            <div class="text-sm text-gray-500">团队业绩</div>
                            <div class="text-2xl font-bold mt-2">¥89,000.00</div>
                            <div class="text-sm text-gray-500 mt-2">本月：¥12,000.00</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 提现记录 -->
            <div class="bg-white shadow rounded-lg overflow-hidden mb-6">
                <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                    <h2 class="text-lg font-medium text-gray-900">提现记录</h2>
                    <a href="#" class="text-sm text-blue-600 hover:text-blue-800">查看全部</a>
                </div>
                <div class="px-6 py-4">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead>
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">提现单号</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">提现金额</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">提现方式</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">状态</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">申请时间</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            <tr>
                                <td class="px-6 py-4 text-sm text-gray-900">TX20240101001</td>
                                <td class="px-6 py-4 text-sm text-gray-900">¥5,000.00</td>
                                <td class="px-6 py-4 text-sm text-gray-900">微信零钱</td>
                                <td class="px-6 py-4">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">已完成</span>
                                </td>
                                <td class="px-6 py-4 text-sm text-gray-500">2024-01-01 10:00:00</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 text-sm text-gray-900">TX20231215001</td>
                                <td class="px-6 py-4 text-sm text-gray-900">¥3,000.00</td>
                                <td class="px-6 py-4 text-sm text-gray-900">支付宝</td>
                                <td class="px-6 py-4">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">已完成</span>
                                </td>
                                <td class="px-6 py-4 text-sm text-gray-500">2023-12-15 14:30:00</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 订单记录 -->
            <div class="bg-white shadow rounded-lg overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                    <h2 class="text-lg font-medium text-gray-900">订单记录</h2>
                    <a href="#" class="text-sm text-blue-600 hover:text-blue-800">查看全部</a>
                </div>
                <div class="px-6 py-4">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead>
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">订单号</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">商品信息</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">订单金额</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">佣金</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">状态</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">下单时间</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            <tr>
                                <td class="px-6 py-4 text-sm text-gray-900">DD20240101001</td>
                                <td class="px-6 py-4 text-sm text-gray-900">三亚5日游</td>
                                <td class="px-6 py-4 text-sm text-gray-900">¥5,000.00</td>
                                <td class="px-6 py-4 text-sm text-gray-900">¥250.00</td>
                                <td class="px-6 py-4">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">已完成</span>
                                </td>
                                <td class="px-6 py-4 text-sm text-gray-500">2024-01-01 10:00:00</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 text-sm text-gray-900">DD20231231001</td>
                                <td class="px-6 py-4 text-sm text-gray-900">丽江7日游</td>
                                <td class="px-6 py-4 text-sm text-gray-900">¥6,000.00</td>
                                <td class="px-6 py-4 text-sm text-gray-900">¥300.00</td>
                                <td class="px-6 py-4">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">进行中</span>
                                </td>
                                <td class="px-6 py-4 text-sm text-gray-500">2023-12-31 15:30:00</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>
</body>
</html>